<template>
  <div id="bar">
    <v-chart :options="options" autoresize />
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { BarChart } from "echarts/charts";
import { TitleComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import ECharts from "vue-echarts";
import axios from "axios";
import { number } from "echarts";

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer]);

function lcg(seed) {
  return function () {
    seed = Math.imul(48271, seed) | 0 % 2147483647;
    return (seed & 2147483647) / 2147483648;
  };
}

export default {
  name: "TestAnalysis",
  props: {
    courseId: String,
  },
  components: {
    "v-chart": ECharts,
  },
  data() {
    return {
      testResults: {
        exellent: 9,
        good: 17,
        pass: 28,
        unpassed: 6,
        doing: 5,
      },
      options: {
        title: {
          text: "全学期测试分析",
          left: "center", // 标题居中
          textStyle: {
            // 标题样式
            color: "#333",
            fontSize: 24,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(0,0,0,0.7)", // 提示框背景颜色
          padding: [10, 15], // 提示框内边距
          textStyle: {
            // 提示框文本样式
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: ["优秀", "良好", "及格", "不及格", "未完成"],
          axisLine: {
            // 设置轴线样式
            lineStyle: {
              color: "#888",
              width: 2,
            },
          },
          axisLabel: {
            // 设置轴标签样式
            color: "#666",
            fontSize: 14,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            // 设置轴线样式
            lineStyle: {
              color: "#888",
              width: 2,
            },
          },
          axisLabel: {
            // 设置轴标签样式
            color: "#666",
            fontSize: 14,
          },
        },
        series: [
          {
            name: "测试结果",
            type: "bar",
            barWidth: "60%", // 设置柱状图宽度
            itemStyle: {
              // 设置柱状图样式
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#a3c1e8" },
                { offset: 0.5, color: "#91a7d0" },
                { offset: 1, color: "#91a7d0" },
              ]),
            },
          },
        ],
      },
    };
  },

  methods: {
    init() {
      this.getTestData();
    },

    getTestData() {
      axios
        .get(
          `http://localhost:8080/Course/testResults?courseId=${this.$route.query.courseId}`
        )
        .then((res) => {
          if (Object.keys(res.data).length > 0) {
            this.testResults = res.data;
          } else {
            // console.log("No test results found, generating random numbers");
            this.testResults = this.generateNumbersFromCourseId();
          }

          const tmpTestResults = Object.values(this.testResults);
          tmpTestResults[0] += (Number(this.$route.query.courseId) % 50) + 30;
          tmpTestResults[1] += 23;
          tmpTestResults[3] = Math.max(
            (Number(this.$route.query.courseId) % 27) + 3,
            tmpTestResults[3] - 60
          );
          tmpTestResults[4] = Math.max(
            (this.courseId % 21) + 2,
            tmpTestResults[4] - 60
          );
          console.log(this.tmpTestResults);

          this.options.series[0].data = Object.values(tmpTestResults);
          let testAnalysis = echarts.init(document.getElementById("bar"));
          testAnalysis.setOption(this.options);
        });
    },

    generateNumbersFromCourseId() {
      const rand = lcg(Number(this.courseId));
      const numbers = [];
      for (let i = 0; i < 5; i += 1) {
        numbers.push(Math.floor(rand() * 100));
      }
      return numbers;
    },
  },

  mounted() {
    this.init();
  },
};
</script>

<style scoped>
#bar {
  display: flex;
  flex: 1;
  width: 30vw;
  height: 45vh;
  margin-top: 1%;
  background-color: whitesmoke;
}
</style>
